<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<template id="cpn_id">
    <div>
       <p>{{cmovies}}</p>
       <p>{{nb}}</p>
       <input type="text" v-model="nb"/>
       <button v-on:click="changeMovies">按钮1</button>
    </div>
</template>
<body>
<div id="div_id">
    <cpn1 v-bind:cmovies="movies" v-bind:message="msg" v-bind:numb="num"
          v-on:changemsg="changemessage"></cpn1>
    <button v-on:click="changeMovies">按钮2</button>
    <p>{{num}}</p>
    <p>{{msg}}</p>
</div>
<script>
    //如果这里写成 Vue.component 会报错，为什么？
    const cpn1={
        template:"#cpn_id",
        props:{
            cmovies:{
                type:Array,
                default:[]
            },
            message:{
                type: String,
                default: ""
            },
            numb:{
                type:Number,
                default: 0
            }
        },
        data(){
            return{
                nb:this.numb
            }
        },
        watch:{
            //这里可以监听本地变量(data)，父组件传来的值(numb)
            /*nb(newValue){
                console.log(newValue)
            }*/
        },
        methods:{
            //当父组件中的值发生变化时，会影响到子组件
            changeMovies(){
                this.$emit("changemsg",'445566')
            },
            changeNumber(){
                this.$emit("changenumber",'445566')
            }
        }
    };
    const app=new Vue({
        el:"#div_id",
        data:{
            movies:['1','2','3'],
            msg:"mmssgg",
            num:123
        },
        methods:{
            //当父组件中的值发生变化时，会影响到子组件
            changeMovies(item){
                this.movies.push(item);
            },
            changemessage(item){
                this.msg=item;
            }
        },
        components:{
          cpn1:cpn1
        }
    });
</script>
</body>
</html>